<template >
  <div class="ui threaded comments" >
   <div class="comment" v-if="!comment.parentId">
     <a class="avatar">
        <img :src="comment.avatar">
     </a>
     <div class="content">
      <a class="author">{{ comment.username }}</a>
      <div class="metadata">
        <span class="date">{{ comment.createTime | date }}</span>
      </div>
      <div>
      <span class="text dp1" >{{ comment.content }}</span><span class="actions" style="margin-left:10px">
        <a class="reply"  @click="Replay" >回复</a>
        <a  class="deleteV" href="javascript:void(0);" v-if="token && user.id === Topuser || user.id === comment.userId"  @click="open2(comment.id)">删除</a>
          <!-- <a  class="deleteV" href="javascript:void(0);"   v-if="token && user.id === Topuser">删除</a> -->
      </span>
      </div>
    </div>
    <div class="comments">
      <div class="comment" v-for="item in Parcomments" :key="item.id">
        <div class="text " >
          <span v-if="item.itemId"> <a class="author">{{item.parentName}}</a>&nbsp;回复&nbsp;<a class="author">{{item.sonName}}&nbsp;:</a></span>
          <a  v-else class="author">{{item.username}}:</a>
          <span class="textdp2">{{item.content}}</span>
          <span class="date">{{ item.createTime | date }}</span>
          <span class="actions" style="margin-left:10px">
          <a class="reply"  @click="Replay2(item)" >回复</a></span>
          <a  class="deleteV2" href="javascript:void(0);" v-if="token && user.id === Topuser || user.id === item.userId"  @click="open(item.id)">删除</a>
          </div>
        <!-- </div> -->
      </div>
    </div>
            <div class="dp2" v-if="IsReply" >
               <b-input
             class="dddp1"
             ref="ggg"
            v-model.lazy="areaMsg"
            type="textarea"
            maxlength="400"
            :placeholder="placeholder"
          ></b-input>
              <el-button type="danger" round size="mini" class="btn" @click="back">取消</el-button>
              <el-button type="success" round size="mini" class="btn" @click="SendMsg">发送</el-button>
             </div>
      </div>
      </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getParentCom, pushComment, deleteComments, deletePComments } from '@/api/comment'

export default {
  name: 'LvCommentsItem',
  components: {
    // multistage
  },
  computed: {
    ...mapGetters([
      'token', 'user'
    ])
  },
  data () {
    return {
      IsReply: false,
      IsReply2: false,
      areaMsg: '',
      placeholder: '',
      Parcomments: [],
      hasParentCom: '',
      itemid: '',
      Tname: ''
    }
  },
  props: {
    comment: {
      type: Object,
      required: true
    },
    Topuser: {
      type: String
    }

  },
  created () {
    this.fetchParentComments(this.comment.id)
    console.log(this.comment)
  },
  methods: {
    // eslint-disable-next-line camelcase
    fetchParentComments (parent_id) {
      // console.log(parent_id)
      getParentCom(parent_id).then(response => {
        // console.log(response) // {code: 200, data: Array(2), message: "操作成功"}
        const { data } = response
        if (data.length !== 0) {
          this.Parcomments = data
          console.log(this.Parcomments) // (2)[{…}, {…}, __ob__: Observer]
        }
      })
    },
    Replay () {
      if (!this.token) {
        this.$message.error('你必须先登录才能发表回复哦！')
      } else {
        this.IsReply = true
        // console.log(123)
        this.$nextTick(() => {
          this.$refs.ggg.focus()
          // this.placeholder = '回复 @' + this.comment.username
          // console.log(username)
        })
      }
    },
    Replay2 (item) {
      if (!this.token) {
        this.$message.error('你必须先登录才能发表回复哦！')
      } else {
        this.IsReply = true
        // console.log(123)
        this.$nextTick(() => {
          this.$refs.ggg.focus()
          this.placeholder = '回复 @' + item.username
          console.log(item.username)
          this.Tname = item.username
          this.itemid = item.id
        })
      }
    },
    back () {
      this.placeholder = ''
      this.areaMsg = ''
      this.IsReply = false
      this.Tname = ''
      this.itemid = ''
      // this.IsReply2 = false
    },
    async  SendMsg () {
      if (this.areaMsg.trim().length === 0) {
        this.$message.error('不能为空')
        // console.log(this.areaMsg)
      } else {
        try {
          const postParData = {}
          postParData.content = this.areaMsg.trim()
          postParData.topic_id = this.comment.topicId
          postParData.parent_id = this.comment.id
          postParData.item_id = this.itemid
          postParData.parent_name = this.user.username
          postParData.son_name = this.Tname
          console.log(postParData)
          await pushComment(postParData)
          this.fetchParentComments(this.comment.id)
          this.$message.success('评论成功')
          this.areaMsg = ''
          this.placeholder = ''
          this.IsReply = false
          this.Tname = ''
          this.itemid = ''
        } catch (e) {
          this.$buefy.toast.open({
            message: `不能发布这个评论. ${e}`,
            type: 'is-danger'
          })
        }
      }
    },
    open (id) {
      this.$confirm('是否要删除该条评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id)
        try {
          deleteComments(id).then(value => {
            this.$message.success('删除成功')
            this.fetchParentComments(this.comment.id)
            // alert(123)
          })
        } catch (e) {
          this.$message.error('删除失败')
        }
      })
        .catch(() => {
          return true
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   })
        })
    },
    open2 (id) {
      this.$confirm('是否要删除该楼层评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try {
          deletePComments(id).then(value => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            })
            // this.fetchParentComments(this.comment.id)
            window.location.reload()
            // alert(123)
          })
        } catch (e) {
          this.$message.error('删除失败')
        }
      })
        .catch(() => {
          return true
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   })
        })
    }
  }
}
</script>
<style lang="less" scoped>

.reply:hover{
//  background-color: rgb(177, 29, 29);
color: blue !important;
}

.deleteV:hover{
  color: red !important;
}
.deleteV2{
  padding-left: 10px;
  // color: blue !important;
  font-size: 5px;
}
.ui .threaded .comments{
  height: 400px;
  background-color: rgb(146, 74, 74);
}
.dp1{
  width: 100%;
  word-wrap:break-word;
word-break:break-all;

}
.dddp1{
   margin-left: 50px;
}

// .dp2{
//   width: 95%;
//   height: 100px;
//    border: 2px solid rgb(103, 173, 201);
//    margin-left: 50px;
// }
 textarea {
            width: 98%;
            height: 98%;
            /*取消边框 */
            border: none;
            /* 取消拖动大小*/
            cursor: pointer;
            /* 取消选中边框 */
            outline: none;

            /* 取消滚动杆 */
            /* overflow: hidden; */
            /* word-wrap: break-word;
            word-break: break-all; */
        }
        .btn{
          float: right;
          margin: 5px;
        }
.ui.threaded.comments .comment .comments {
    margin: -1em 0 -1em 1.25em;
    padding: 1em 0 1em 2.25em;
    -webkit-box-shadow: -1px 0 0 rgb(34 36 38 / 15%);
    box-shadow: -1px 0 0 rgb(34 36 38 / 15%);
}

// .mc1{
//   width: 80%;
//   height: 40px;
//   background-color: rgb(177, 102, 102);
// }
.ui.comments .comment .author {
    font-size: 1em;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 700;
}
.ui.comments .comment .text {
    margin: -1em 0 .5em;
    font-size: 1em;
    word-wrap: break-word;
    color: rgba(0,0,0,.87);
    line-height: 1.8;
}
.ui.comments .comment .text .textdp2{
    margin: .25em 1em 0em .5em;
    font-size: 1em;
    word-wrap: break-word;
    color: rgba(0,0,0,.87);
    line-height: 0.3;
}
.ui.comments .comment .text .date{
    // margin: .25em 0 1.25em .5em;
    font-size: 0.5em;
    word-wrap: break-word;
    color: rgba(141, 137, 137, 0.87);
    line-height: 1.3;
}
// .text.textdp2{
//     font-size: 1.5em;
// }
// .text.date{
//     font-size: 1em;
// }
.ui.threaded.comments .comment .comments[data-v-014bf4b2] {
    margin: -1em 0 -1em 1.25em;
    padding: 0em 0 .5em 2.25em;
    box-shadow: -1px 0 0 rgb(34 36 2.53333333%);
}
.ui.comments .comment {
    position: relative;
    background: 0 0;
    margin: 0 0 0;
    padding: .5em 0 0;
    border: none;
    border-top: none;
    line-height: 1.2;
}

</style>
